<template>
  <div>
    <div v-if="legendData.length > 0" class="map-legend">
      <div v-for="(item, index) in legendData" :key="'tuli' + index" class="map-tuli">
        <img :src="item.value" alt="">{{ item.label }}
      </div>
      <template v-if="jcdvalue35">
        <div class="map-tuli"><img src="../../../assets/images/tubiaos/hyuan6.png">管网问题点位</div>
      </template>
      <template v-if="jcdvalue34">
        <div class="map-tuli"><img src="../../../assets/images/bdh/rhhl_ssfw_qd.png">秦皇岛秦东水务有限公司（一厂）收水范围
        </div>
        <div class="map-tuli"><img src="../../../assets/images/bdh/rhhl_ssfw_qn.png">秦皇岛秦南水务有限公司（二厂）收水范围
        </div>
        <div class="map-tuli"><img src="../../../assets/images/bdh/rhhl_ssfw_bk.png">北控（秦皇岛）水务有限责任公司第三污水处理厂收水范围
        </div>
        <div class="map-tuli"><img src="../../../assets/images/bdh/rhhl_ssfw_gz.png">国中（秦皇岛）污水处理有限公司(四厂)收水范围
        </div>
        <div class="map-tuli"><img src="../../../assets/images/bdh/rhhl_ssfw_zz.png">中冶秦皇岛水务有限公司(五厂)收水范围
        </div>
        <div class="map-tuli"><img src="../../../assets/images/bdh/rhhl_ssfw_qb.png">秦皇岛秦北水务有限公司收水范围</div>
        <div class="map-tuli"><img src="../../../assets/images/bdh/rhhl_ssfw_fnqzz.png">秦皇岛市抚宁区中冶水务有限公司 收水范围
        </div>
        <div class="map-tuli"><img src="../../../assets/images/bdh/rhhl_ssfw_hd.png">华电水务秦皇岛有限公司收水范围</div>
      </template>
    </div>
    <div v-if="DBSType == 'dbs'|| DBSType=='zd' || DBSType=='bdh_szhzd'" class="dbstulis">
      <!-- <img src="../../assets/images/tulis.png" alt="" style="width: 100%"> -->
      <div class="sbs_l">
        <p>水质类别</p>
        <p>示例演示</p>
      </div>
      <div class="sbs_r">
        <ul>
          <li :class="{ active: xuanze == 'Ⅰ类' }" @click="dianjilei('Ⅰ类')"><b>Ⅰ类水</b><span /></li>
          <li :class="{ active: xuanze == 'Ⅱ类' }" @click="dianjilei('Ⅱ类')"><b>Ⅱ类水</b><span /></li>
          <li :class="{ active: xuanze == 'Ⅲ类' }" @click="dianjilei('Ⅲ类')"><b>Ⅲ类水</b><span /></li>
          <li :class="{ active: xuanze == 'Ⅳ类' }" @click="dianjilei('Ⅳ类')"><b>Ⅳ类水</b><span /></li>
          <li :class="{ active: xuanze == 'Ⅴ类' }" @click="dianjilei('Ⅴ类')"><b>Ⅴ类水</b><span /></li>
          <li :class="{ active: xuanze == '劣Ⅴ类' }" @click="dianjilei('劣Ⅴ类')"><b>劣Ⅴ类水</b><span /></li>
          <li :class="{ active: xuanze == '/' }" @click="dianjilei('/')"><b>无数据</b><span /></li>
        </ul>
      </div>
    </div>
    <!--    hjzl-->
    <div v-if="DBSType == 'hjzl-shouye'" class="dbstulis">
      <div class="sbs_l">
        <p>水质</p>
        <p>类别</p>
      </div>
      <div class="sbs_r1">
        <ul>
          <li :class="{ active: xuanze == '一类海水' }"><b>一类海水</b><span /></li>
          <li :class="{ active: xuanze == '二类海水' }"><b>二类海水</b><span /></li>
          <li :class="{ active: xuanze == '三类海水' }"><b>三类海水</b><span /></li>
          <li :class="{ active: xuanze == '四类海水' }"><b>四类海水</b><span /></li>
          <li :class="{ active: xuanze == '劣四类海水' }"><b>劣四类海水</b><span /></li>

        </ul>
      </div>
    </div>
    <div v-if="DBSType == 'mlhw'" v-show="jssx" class="mlhwtuli">
      <div class="titles">建设时序</div>
      <div><img src="../../../assets/images/HY/wqhf4.png">已建成美丽海湾</div>
      <div><img src="../../../assets/images/HY/mlhwtl_01.jpg">"十四五" 时期美丽海湾建成区</div>
      <div><img src="../../../assets/images/HY/mlhwtl_02.jpg">"十五五" 时期美丽海湾建成区</div>
      <div><img src="../../../assets/images/HY/mlhwtl_03.jpg">"十六五" 时期美丽海湾建成区</div>
    </div>
    <div
      v-if="stationActive==4&&(jcdvalue40||jcdvalue400)"
      class="dbstulis dbstulis_"
      :style="{'width':'6vw','right': DBSType == 'bdh_jahy'&&jcdvalue7&&(bdh_jahy_ListOpt.length!=0||jcdvalue34||jcdvalue41||jcdvalue42||jcdvalue43||jcdvalue44||jcdvalue45) ? 'calc(0.5vw + 69px + 145px)':'calc(0.5vw + 5px)','bottom':stationActive==4&&bdh_jahy_ListOpt.length!=0?'60px':'0px'}"
    >
      <img src="../../../assets/images/tubiaos/hyuan12.png" class="img_">
    </div>
    <div
      v-if="DBSType == 'bdh_jahy'&&jcdvalue7&&(bdh_jahy_ListOpt.length!=0||jcdvalue34||jcdvalue41||jcdvalue42||jcdvalue43||jcdvalue44||jcdvalue45)"
      class="mlhwtulis_mlhw"
    >
      <div v-if="bdh_jahy_ListOpt.includes('近岸水质')"><img
        src="../../../assets/images/tubiaos/ja1.png"
        style="width:14px;"
      >近岸水质
      </div>
      <div v-if="bdh_jahy_ListOpt.includes('海水浴场')"><img
        src="../../../assets/images/tubiaos/ja2.png"
        style="width:14px;"
      >海水浴场
      </div>
      <div v-if="bdh_jahy_ListOpt.includes('浴场外围海域')"><img
        src="../../../assets/images/tubiaos/ja3.png"
        style="width:14px;"
      >浴场外围海域
      </div>
      <div v-if="bdh_jahy_ListOpt.includes('秦皇岛港海域')"><img
        src="../../../assets/images/tubiaos/ja4.png"
        style="width:14px;"
      >秦皇岛港海域
      </div>
      <div v-if="bdh_jahy_ListOpt.includes('重点河口海域')"><img
        src="../../../assets/images/tubiaos/ja5.png"
        style="width:14px;"
      >重点河口海域
      </div>
      <template v-if="jcdvalue34">
        <div><img src="../../../assets/images/shuimu2_mini.png">手摇木船</div>
        <div><img src="../../../assets/images/shuimu3_mini.png">小型电动捕捞艇</div>
        <div><img src="../../../assets/images/shuimu4_mini.png">中型水母捕捞兜网船</div>
        <div><img src="../../../assets/images/shuimu1_mini.png">大型水母捕捞船舶</div>
      </template>

      <div v-if="jcdvalue41"><img src="../../../assets/images/shuimu2_mini.png">手摇木船</div>
      <div v-if="jcdvalue41"><img src="../../../assets/images/shuimu3_mini.png">小型电动捕捞艇</div>
      <div v-if="jcdvalue41"><img src="../../../assets/images/shuimu4_mini.png">中型水母捕捞兜网船</div>
      <div v-if="jcdvalue41"><img src="../../../assets/images/shuimu1_mini.png">大型水母捕捞船舶</div>

      <div v-if="jcdvalue42"><img src="../../../assets/images/tubiaos/hyuan7.png">大型藻类多发区域</div>

      <div v-if="jcdvalue43"><img src="../../../assets/images/tubiaos/hyuan6_mini.png">污染事故</div>

      <div v-if="jcdvalue44"><img
        src="../../../assets/images/tubiaos/hyuan5.svg"
        style="width: 10px;height: 20px;margin: 0 11px 0 6px;"
      >沉潜油围控网
      </div>

      <div v-if="jcdvalue45"><img src="../../../assets/images/tubiaos/hyuan3.png">控制点</div>
      <div v-if="jcdvalue45"><img src="../../../assets/images/tubiaos/hyuan4.png" style="width: 14px;margin: 0 8px;">锚地
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    stationActive: {
      type: Number,
      default: 3
    },
    legendData: {
      type: Array,
      default: () => []
    },
    bdh_jahy_ListOpt: {
      type: Array,
      default: () => []
    },
    DBSType: {
      type: String,
      default: () => ''
    },
    jssx: {
      type: Boolean,
      default: () => ''
    },
    jcdvalue7: {
      type: Boolean,
      default: false
    },
    jcdvalue400: {
      type: Boolean,
      default: false
    },
    jcdvalue34: {
      type: Boolean,
      default: false
    },
    jcdvalue35: {
      type: Boolean,
      default: false
    },
    jcdvalue40: {
      type: Boolean,
      default: false
    },
    jcdvalue41: {
      type: Boolean,
      default: false
    },
    jcdvalue42: {
      type: Boolean,
      default: false
    },
    jcdvalue43: {
      type: Boolean,
      default: false
    },
    jcdvalue44: {
      type: Boolean,
      default: false
    },
    jcdvalue45: {
      type: Boolean,
      default: false
    },
    jcdvalue47: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      xuanze: ''
    }
  },
  watch: {
    jcdvalue34(val) {
      console.log(val)
    },
    DBSType(val) {
      console.log('图例接收', val)
    },
    legendData(newVal) {
      this.legendData = newVal
      console.log(' this.legendData', this.legendData)
    },
    jcdvalue7(newVal) {
      console.log(newVal)
    }
  },
  mounted() {
    // console.log(this.$parent,444444444444444)
  },
  methods: {
    dianjilei(name) {
      if (name != '') {
        if (name == this.xuanze) {
          this.xuanze = ''
          this.$emit('setszlb', '')
        } else {
          this.xuanze = name
          this.$emit('setszlb', name)
        }
      } else {
        this.xuanze = ''
        this.$emit('setszlb', '')
      }
    },
    diansjilei(name) {
      // if (name != '') {
      //   if (name == this.xuanze) {
      //     this.xuanze = ''
      //     this.$emit('setxszlb', '')
      //   } else {
      //     this.xuanze = name
      //     this.$emit('setxszlb', name)
      //   }
      // } else {
      //   this.xuanze = ''
      //   this.$emit('setxszlb', '')
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.map-legend {
  padding: 1vh 0.47vw;
  background: rgba(0, 1, 2, 0.75);
  float: right;

  .map-tuli {
    height: 3vh;
    line-height: 3vh;
    font-size: 0.73vw;

    img {
      max-width: 15px;
      margin-right: 7px;
      vertical-align: middle;
    }
  }
}

.dbstulis {
  width: 33.86vw;
  /*height: 3.907vw;*/
  float: left;
  position: absolute;
  bottom: 0;
  right: calc(0.5vw + 69px);
  background: #173b75;
  border-radius: 6px;

  .sbs_l {
    width: 13.9%;
    height: 100%;
    float: left;
    border-right: 1px solid #234666;
    padding: 0.4vw;

    p {
      font-size: 12px;
      text-align: center;
      margin: 0.21vw 0;
      color: #BFCCE4;
    }
  }

  .sbs_r {
    width: 86%;
    height: 100%;
    float: left;
    padding: 0.4vw 0.9vw;

    ul {
      width: 100%;
      height: 100%;
      display: flex;

      li {
        width: auto;
        height: auto;
        // border-bottom: 0.6vw solid #CCFFFF;
        float: left;
        padding: 0.2vw 0 0 0;
        font-size: 0.732vw;
        cursor: pointer;
        flex: 1;

        b {
          width: 100%;
          text-align: center;
          display: inline-block;
        }

        span {
          width: 100%;
          height: 0.6vw;
          background-color: #CCFFFF;
          display: inline-block;
          margin-top: 4px;
        }
      }

      li.active span {
        border-radius: 0.6vw;
      }

      li:nth-child(2) span {
        background-color: #13B3DF;
      }

      li:nth-child(3) span {
        background-color: #52D713;
      }

      li:nth-child(4) span {
        background-color: #EEDA01;
      }

      li:nth-child(5) span {
        background-color: #F28F2F;
      }

      li:nth-child(6) span {
        background-color: #ED2827;
      }

      li:nth-child(7) span {
        background-color: #ABABAB;
      }
    }
  }

  .sbs_sr {
    ul {
      li span {
        background-color: #6FB3FF;
      }

      li:nth-child(2) span {
        background-color: #B1DEF7;
      }

      li:nth-child(3) span {
        background-color: #BEB1A1;
      }

      li:nth-child(4) span {
        background-color: #9B856E;
      }

      li:nth-child(5) span {
        background-color: #7A624A;
      }

      li:nth-child(6) span {
        background-color: #ACADAD;
      }
    }
  }

  .sbs_r1 {
    width: 86%;
    height: 100%;
    float: left;
    padding: 0.4vw 0.9vw;

    ul {
      width: 100%;
      height: 100%;
      display: flex;

      li {
        width: auto;
        height: auto;
        // border-bottom: 0.6vw solid #CCFFFF;
        float: left;
        padding: 0.2vw 0 0 0;
        font-size: 0.732vw;
        cursor: pointer;
        flex: 1;

        b {
          width: 100%;
          text-align: center;
          display: inline-block;
        }

        span {
          width: 100%;
          height: 0.6vw;
          background-color: #CCFFFF;
          display: inline-block;
          margin-top: 4px;
        }
      }

      li.active span {
        border-radius: 0.6vw;

      }

      li:nth-child(1) span {
        background-color: #73B2FF;

      }

      li:nth-child(2) span {
        background-color: #B2DDF7;

      }

      li:nth-child(3) span {
        background-color: #BEB1A1;

      }

      li:nth-child(4) span {
        background-color: #9B856E;
      }

      li:nth-child(5) span {
        background-color: #7A624A;
      }

    }
  }
}

.dbstulis_ {
  width: 28vw;

  .sbs_l {
    width: 11.9%;
  }

  .sbs_r {
    width: 88%;
  }
}

.mlhwtuli {
  width: 258px;
  position: absolute;
  bottom: 0;
  right: calc(0.5vw + 5px);
  background-color: #173b75;
  border: 1px solid #1e5a8a;
  border-radius: 5%;
  padding: 0.6vw;

  div {
    width: 100%;
    text-align: left;
    padding: 0.15vw 0.1vw;
  }

  .titles {
    text-align: center;
  }

  div:nth-child(1) {
    font-weight: bold;
  }

  img {
    margin-right: 5px;
  }
}

.mlhwtulis_mlhw {
  width: 200px;
  position: absolute;
  bottom: 0;
  right: calc(0.5vw + 5px);
  background-color: #173b75;
  border: 1px solid #1e5a8a;
  border-radius: 5%;
  padding: 0.6vw;

  div {
    width: 100%;
    text-align: left;
    padding: 0.15vw 0.1vw;
  }

  .titles {
    text-align: center;
  }

  div:nth-child(1) {
    font-weight: bold;
  }

  img {
    width: 22px;
    height: auto;
    margin-right: 5px;
    vertical-align: middle;
  }
}
</style>
